<template>
	<div id="sportAnalysis">
		<v-head></v-head>
		<v-left></v-left>

		<div class="list">
			<div class="tubiao-title">平均每周运动次数情况
				<el-select v-model="time1" class="qizhiDate" @change='avgWeekSprotCount()'>
					<el-option v-for="item in option_select" :label="item.name" :value="item.value" :key="item.value"></el-option>
				</el-select>
			</div>
			<el-row style="border:1px solid #e6e6e6;">
				<el-col :span="12" style="padding-right:10px;">
					<div id="box1">
						<vue-highcharts :options="options_bar_week" ref="barChart_1"></vue-highcharts>
					</div>
				</el-col>
				<el-col :span="12" style="padding-left:60px;">
					<div id="box2">
						<vue-highcharts :options="options_pie_week" ref="pieChart_1"></vue-highcharts>
					</div>
				</el-col>
			</el-row>

			<div class="tubiao-title" style="margin-top:15px;">单次跑步平均里程情况
				<el-select v-model="time2" class="qizhiDate" @change='runAvgLength()'>
					<el-option v-for="item in option_select" :label="item.name" :value="item.value" :key="item.value"></el-option>
				</el-select>
			</div>
			<el-row style="border:1px solid #e6e6e6;">
				<el-col :span="12" style="padding-right:10px;">
					<div id="box3">
						<vue-highcharts :options="options_bar_every" ref="barChart_2"></vue-highcharts>
					</div>
				</el-col>
				<el-col :span="12" style="padding-left:60px;">
					<div id="box4">
						<vue-highcharts :options="options_pie_every" ref="pieChart_2"></vue-highcharts>
					</div>
				</el-col>
			</el-row>

			<div class="tubiao-title" style="margin-top:15px;">跑步总里程情况
				<el-select v-model="time3" class="qizhiDate" @change='runAllLength()'>
					<el-option v-for="item in option_select" :label="item.name" :value="item.value" :key="item.value"></el-option>
				</el-select>
				<span :class="classObj1" @click="changeBtn(1)" v-if="user.uniName !=='万航'">校区</span>
				<span :class="classObj2" @click="changeBtn(2)">性别</span>
				<span :class="classObj3" @click="changeBtn(3)">年级</span>
			</div>
			<el-row style="border:1px solid #e6e6e6;">
				<el-col :span="24">
					<div id="box5">
						<vue-highcharts :options="options_bar_length" ref="barChart_3"></vue-highcharts>
					</div>
				</el-col>
			</el-row>
		</div>
		<v-footer></v-footer>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";
	import vHead from "../common/Header.vue";
	import vFooter from "../common/Footer.vue";
	import vLeft from "./leftSide.vue";

	export default {
		data() {
			return {
				time1: "1",
				time2: "1",
				time3: "1",
				weidu: "year",
				uniName: "",
				classObj1: { btnSpan: true, span_active: false },
				classObj2: { btnSpan: true, span_active: false },
				classObj3: { btnSpan: true, span_active: true },
				startDate_1: "",
				startDate_2: "",
				option_select: [
					{
						name: "过去7天",
						value: "1"
					},
					{
						name: "过去30天",
						value: "2"
					}
				],
				options_bar_week: {
					chart: {
						type: "bar"
					},
					title: {
						text: ""
					},
					credits: {
						enabled: false
					},
					subtitle: {
						text: "单位:次",
						align: "left"
					},
					xAxis: {},
					yAxis: {},
					tooltip: {
						headerFormat: "{point.key}次:  ",
						pointFormat: "{point.y}",
						valueSuffix: "人"
					},
					plotOptions: {
						series: {
							states: {
								click: {
									enabled: false
								}
							}
						}
					},
					series: [],
					legend: {
						enabled: false //让下面的series name 不显示
					}
				},
				options_pie_week: {
					chart: {
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					credits: {
						enabled: false
					},
					colors: [
						"#e84c3d",
						"#eaeda1",
						"#ea505d",
						"#227cb5",
						"#1abc9c",
						"#80e5f6",
						"#d8e00b"
					],
					title: {
						text: ""
					},
					tooltip: {
						headerFormat: "",
						pointFormat: "<b>{point.name}</b><br> {point.percentage:.1f}%  {point.y}人"
					},
					series: [],
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: "pointer",
							dataLabels: {
								enabled: true,
								format: '<b>{point.name}: {point.y}人  {point.percentage:.1f}%'
							},
							showInLegend: true
						}
					}
				},
				options_bar_every: {
					chart: {
						type: "bar"
					},
					title: {
						text: ""
					},
					credits: {
						enabled: false
					},
					subtitle: {
						text: "单位:公里",
						align: "left"
					},
					xAxis: {},
					yAxis: {},
					tooltip: {
						headerFormat: "{point.key}公里:  ",
						pointFormat: "{point.y}",
						style: {
							//display:'none'
						},
						valueSuffix: "人"
					},
					plotOptions: {
						series: {
							states: {
								click: {
									enabled: false
								}
							}
						}
					},
					series: [],
					legend: {
						enabled: false //让下面的series name 不显示
					}
				},
				options_pie_every: {
					chart: {
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					credits: {
						enabled: false
					},
					colors: [
						"#e84c3d",
						"#eaeda1",
						"#ea505d",
						"#227cb5",
						"#1abc9c",
						"#80e5f6",
						"#d8e00b"
					],
					title: {
						text: ""
					},
					tooltip: {
						headerFormat: "",
						pointFormat: "<b>{point.name}</b><br> {point.percentage:.1f}%  {point.y}人"
					},
					series: [],
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: "pointer",
							dataLabels: {
								enabled: true,
								format: '<b>{point.name}: {point.y}人  {point.percentage:.1f}%'

							},
							showInLegend: true
						}
					}
				},
				options_bar_length: {
					chart: {
						type: "column"
					},
					title: {
						text: ""
					},
					credits: {
						enabled: false
					},
					subtitle: {
						text: "单位:人",
						align: "left"
					},
					xAxis: {
						title: {
							text: "单位：公里",
							align: "high"
						},
						allowDecimals: false,
						categories: ["0-20", "20-40", "40-60", "60-80", "80-100", "100及以上"]
					},
					yAxis: {},
					tooltip: {
						headerFormat:
							'<span style="font-size:10px">{point.key}公里</span><table>',
						pointFormat:
							'<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
							'<td style="padding:0"><b>{point.y} 人</b></td></tr>',
						footerFormat: "</table>",
						shared: true,
						useHTML: true
					},
					plotOptions: {
						series: {
							states: {
								click: {
									enabled: false
								}
							}
						}
					},
					series: [],
					legend: {
						enabled: false //让下面的series name 不显示
					}
				},
				showInfo2: false,
				dataList: [],
				dataList_1: ["0-1", "1-2", "2-3", "3-4", "4-5", "5及以上"],
				dataList_2: ["0-2", "2-4", "4-6", "6-8", "8-10", "10及以上"]
			};
		},
		mounted() {
			this.uniName = this.user.uniName;
			let sections = document.getElementById("section_box").children;
			let logo_left = document.getElementsByClassName("logo-left")[0];
			let header = document.getElementById('header');
			let random = document.querySelector(".random");
			logo_left.style.background = "#fff";
			random.style.boxShadow = "0px 0px 0px 0px rgba(0, 0, 0, 0.5)";
			header.style.boxShadow = "0px 1px 4px 0px rgba(0, 0, 0, 0.5)";
			sections[3].className = "item_active";
			document.getElementsByClassName("head_img")[0].src = "../../../static/img/dataAnalysis_icon_blue.png";
			this.isInSemester();
		},
		components: {
			vHead,
			vFooter,
			vLeft
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			//判断学期是否结束
			isInSemester() {
				this.dataList = [];
				let url = this.$util.domain + "/dataPlatForm/user/running/isInSemester";
				this.$http({
					url,
					method: "GET"
				}).then(response => {
					if (response.data.error == 10000) {
						let dataObj = response.data.data;
						let option = dataObj.span;

						option.forEach(item => {
							this.dataList.push(item.second);
						});
						this.dataList[5] =
							this.dataList[5].slice(0, this.dataList[5].indexOf("-")) + "及以上";
						//确定下拉框选项
						if (this.uniName !== "万航") {
							if (!dataObj.inSemester) {
								this.option_select.push({
									name: "刚结束的上学期",
									value: "3"
								});
							} else {
								this.option_select.push({
									name: "本学期至今",
									value: "3"
								});
							}
						} else {
							this.startDate_1 = dataObj.sems[0].startDate;
							this.startDate_2 = dataObj.sems[1].startDate;
							this.option_select.push({
								name: dataObj.sems[0].desc,
								value: "4"
							});
							this.option_select.push({
								name: dataObj.sems[1].desc,
								value: "5"
							});
						}

						this.avgWeekSprotCount();
						this.runAvgLength();
						this.runAllLength();
					}
				});
			},
			//平均每周运动次数
			avgWeekSprotCount() {
				let url;
				if (this.time1 == "4") {
					url = this.$util.domain + "/dataPlatForm/user/running/weekTimes?type=4&semStart=" + this.startDate_1;
				} else if (this.time1 == "5") {
					url = this.$util.domain + "/dataPlatForm/user/running/weekTimes?type=4&semStart=" + this.startDate_2;
				} else {
					url = this.$util.domain + "/dataPlatForm/user/running/weekTimes?type=" + this.time1;
				}
				this.$http({
					url,
					method: "GET",
				}).then(response => {
					if (response.data.error == 10000) {
						let array_week_bar = [],
							array_week_pie = [];
						let barChart = this.$refs.barChart_1,
							pieChart = this.$refs.pieChart_1;
						let dataList = response.data.data;

						barChart.removeSeries();
						pieChart.removeSeries();
						if (dataList && dataList.length > 0) {
							let x_option = [], y_options = [];

							dataList.forEach(item => {
								array_week_bar.push(item.num);
								array_week_pie.push([
									this.dataList_2[item.groupNum - 1] + "次",
									item.num
								]);
								x_option.push(this.dataList_2[item.groupNum - 1]);
							});

							let max = Math.max.apply(null, array_week_bar);
							max = Math.ceil(max / 12);
							if (max == 0) {
								max = 1;
							} else if (max < 10) {
								max = max;
							} else if (max < 100) {
								max = Math.ceil(max / 10) * 10;
							} else if (max < 1000) {
								max = Math.ceil(max / 100) * 100;
							} else if (max < 10000) {
								max = Math.ceil(max / 1000) * 1000;
							} else {
								max = Math.ceil(max / 10000) * 10000;
							}
							y_options = [
								0,
								max,
								2 * max,
								3 * max,
								4 * max,
								5 * max,
								6 * max,
								7 * max,
								8 * max,
								9 * max,
								10 * max,
								11 * max,
								12 * max
							];

							barChart.getChart().xAxis[0].update({
								allowDecimals: false,
								categories: x_option.reverse()
							});
							barChart.getChart().yAxis[0].update({
								title: {
									text: "单位:人",
									align: "high"
								},
								min: 0,
								tickAmount: 13,
								tickPositions: y_options
							});
							barChart.addSeries({
								data: array_week_bar.reverse()
							});

							pieChart.addSeries({
								type: "pie",
								name: "",
								innerSize: "80%",
								data: array_week_pie
							});
						}
					}
				});
			},
			//单次跑步平均里程情况
			runAvgLength() {
				let url;
				if (this.time2 == "4") {
					url = this.$util.domain + "/dataPlatForm/user/running/avgLength?type=4&semStart=" + this.startDate_1;
				} else if (this.time2 == "5") {
					url = this.$util.domain + "/dataPlatForm/user/running/avgLength?type=4&semStart=" + this.startDate_2;
				} else {
					url = this.$util.domain + "/dataPlatForm/user/running/avgLength?type=" + this.time2;
				}
				this.$http({
					url,
					method: "GET",
				}).then(response => {
					if (response.data.error == 10000) {
						let array_once_bar = [],
							array_once_pie = [];
						let barChart = this.$refs.barChart_2,
							pieChart = this.$refs.pieChart_2;
						let dataList = response.data.data;

						barChart.removeSeries();
						pieChart.removeSeries();
						if (dataList && dataList.length > 0) {
							let x_option = [],
								y_options = [];
							dataList.forEach(item => {
								array_once_bar.push(item.num);
								array_once_pie.push([
									this.dataList_1[item.groupNum - 1],
									item.num
								]);
								x_option.push(this.dataList_1[item.groupNum - 1]);
							});

							let max = Math.max.apply(null, array_once_bar);
							max = Math.ceil(max / 12);
							if (max == 0) {
								max = 1;
							} else if (max < 10) {
								max = max;
							} else if (max < 100) {
								max = Math.ceil(max / 10) * 10;
							} else if (max < 1000) {
								max = Math.ceil(max / 100) * 100;
							} else if (max < 10000) {
								max = Math.ceil(max / 1000) * 1000;
							} else {
								max = Math.ceil(max / 10000) * 10000;
							}
							y_options = [
								0,
								max,
								2 * max,
								3 * max,
								4 * max,
								5 * max,
								6 * max,
								7 * max,
								8 * max,
								9 * max,
								10 * max,
								11 * max,
								12 * max
							];

							barChart.getChart().xAxis[0].update({
								allowDecimals: false,
								categories: x_option.reverse()
							});
							barChart.getChart().yAxis[0].update({
								title: {
									text: "单位:人",
									align: "high"
								},
								min: 0,
								tickAmount: 13,
								tickPositions: y_options
							});
							barChart.addSeries({
								data: array_once_pie.reverse()
							});

							pieChart.addSeries({
								type: "pie",
								name: "",
								innerSize: "80%",
								data: array_once_pie
							});
						}
					}
				});
			},
			//跑步总里程情况
			runAllLength() {
				let url;
				let weidu = this.weidu;
				if (this.time3 == "4") {
					url = this.$util.domain + "/dataPlatForm/sports/length/" + weidu + "?type=4&semStart=" + this.startDate_1;
				} else if (this.time3 == "5") {
					url = this.$util.domain + "/dataPlatForm/sports/length/" + weidu + "?type=4&semStart=" + this.startDate_2;
				} else {
					url = this.$util.domain + "/dataPlatForm/sports/length/" + weidu + "?type=" + this.time3;
				}

				this.$http({
					url,
					method: "GET"
				}).then(response => {
					let dataList = response.data.data;
					let barChart = this.$refs.barChart_3;
					barChart.removeSeries();
					if (response.data.error == 10000) {
						if (dataList && dataList.length > 0) {
							let campArr = [],
								genderArr = [],
								yearArr = [],
								campdata = [],
								genderdata = [],
								yeardata = [],
								length = dataList.length;
							let y_options = []; //y轴纵坐标数组；
							if (weidu == "campusZones") {
								let maxArr = []; //存放每组数据最大值的数组；
								for (let j = 0; j < length; j++) {
									campArr.push(dataList[j].campusName); //存放校区名称的数组；
								}
								for (let i = 0; i < length; i++) {
									let y1 = []; //存放每个校区跑步人数的数组；
									dataList[i].list.forEach(item => {
										y1.push(item.num);
									});
									let max = Math.max.apply(null, y1);
									maxArr.push(max);
									campdata.push({ name: campArr[i], data: y1 });
								}
								let max = Math.max.apply(null, maxArr);
								max = Math.ceil(max / 9);

								if (max < 10) {
									max = max;
								} else if (max < 100) {
									max = Math.ceil(max / 10) * 10;
								} else if (max < 1000) {
									max = Math.ceil(max / 100) * 100;
								} else if (max < 10000) {
									max = Math.ceil(max / 1000) * 1000;
								} else {
									max = Math.ceil(max / 10000) * 10000;
								}
								y_options = [
									0,
									max,
									2 * max,
									3 * max,
									4 * max,
									5 * max,
									6 * max,
									7 * max,
									8 * max,
									9 * max
								];

								barChart.removeSeries();
								barChart.getChart().yAxis[0].update({
									title: {
										text: ""
									},
									min: 0,
									tickAmount: 10,
									tickPositions: y_options
								});
								campdata.forEach((item, index) => {
									barChart.addSeries({
										name: campArr[index],
										data: campdata[index].data
									});
								});
							} else if (weidu == "gender") {
								let maxArr = [];
								for (let j = 0; j < length; j++) {
									dataList[j].group = dataList[j].group == 1 ? "男" : "女";
									genderArr.push(dataList[j].group);
								}
								for (let i = 0; i < length; i++) {
									let y2 = [];
									dataList[i].list.forEach(item => {
										y2.push(item.num);
									});
									let max = Math.max.apply(null, y2);
									maxArr.push(max);
									genderdata.push({ name: genderArr[i], data: y2 });
								}
								let max = Math.max.apply(null, maxArr);
								max = Math.ceil(max / 9);
								if (max < 10) {
									max = max;
								} else if (max < 100) {
									max = Math.ceil(max / 10) * 10;
								} else if (max < 1000) {
									max = Math.ceil(max / 100) * 100;
								} else if (max < 10000) {
									max = Math.ceil(max / 1000) * 1000;
								} else {
									max = Math.ceil(max / 10000) * 10000;
								}
								y_options = [
									0,
									max,
									2 * max,
									3 * max,
									4 * max,
									5 * max,
									6 * max,
									7 * max,
									8 * max,
									9 * max
								];

								barChart.removeSeries();
								barChart.getChart().yAxis[0].update({
									title: {
										text: ""
									},
									min: 0,
									tickAmount: 10,
									tickPositions: y_options
								});
								genderdata.forEach((item, index) => {
									barChart.addSeries({
										name: genderArr[index],
										data: genderdata[index].data
									});
								});
							} else if (weidu == "year") {
								let maxArr = [];
								for (let j = 0; j < length; j++) {
									yearArr.push(dataList[j].group);
								}
								for (let i = 0; i < length; i++) {
									let y3 = [];
									dataList[i].list.forEach(item => {
										y3.push(item.num);
									});
									let max = Math.max.apply(null, y3);
									maxArr.push(max);
									yeardata.push({ name: yearArr[i], data: y3 });
								}
								let max = Math.max.apply(null, maxArr);
								max = Math.ceil(max / 9);
								if (max < 10) {
									max = max;
								} else if (max < 100) {
									max = Math.ceil(max / 10) * 10;
								} else if (max < 1000) {
									max = Math.ceil(max / 100) * 100;
								} else if (max < 10000) {
									max = Math.ceil(max / 1000) * 1000;
								} else {
									max = Math.ceil(max / 10000) * 10000;
								}
								y_options = [
									0,
									max,
									2 * max,
									3 * max,
									4 * max,
									5 * max,
									6 * max,
									7 * max,
									8 * max,
									9 * max
								];
								barChart.removeSeries();
								barChart.getChart().yAxis[0].update({
									title: {
										text: ""
									},
									min: 0,
									tickAmount: 10,
									tickPositions: y_options
								});
								barChart.getChart().xAxis[0].update({
									title: {
										text: "单位：公里",
										align: "high"
									},
									allowDecimals: false,
									categories: [
										"0-20",
										"20-40",
										"40-60",
										"60-80",
										"80-100",
										"100及以上"
									]
								});
								yeardata.forEach((item, index) => {
									barChart.addSeries({
										name: yearArr[index] + "级",
										data: yeardata[index].data
									});
								});
							}
						}
					}
				});
			},
			changeBtn(index) {
				let weidu;
				this.classObj1.span_active = false;
				this.classObj2.span_active = false;
				this.classObj3.span_active = false;
				if (index == 1) {
					this.classObj1.span_active = true;
					this.weidu = "campusZones";
				} else if (index == 2) {
					this.classObj2.span_active = true;
					this.weidu = "gender";
				} else {
					this.classObj3.span_active = true;
					this.weidu = "year";
				}
				this.runAllLength();
			}
		}
	};
</script>

<style>
	#sportAnalysis {
		padding-bottom: 50px;
		background: #f0f3f4;
		height: calc(100% - 60px);
	}

	#sportAnalysis .list {
		width: calc(100% - 290px);
		margin-left: 220px;
		margin-top: 20px;
		height: calc(100% - 140px);
	}

	#sportAnalysis div.module:first-child {
		border-bottom: solid 4px #20a0ff;
	}

	#sportAnalysis div.module:first-child>.title {
		color: #20a0ff;
	}

	#sportAnalysis .tubiao-title {
		height: 60px;
		line-height: 60px;
		font-size: 16px;
		color: #4d4d4d;
		background-color: #f6f6f6;
		padding-left: 20px;
	}

	#sportAnalysis .qizhiDate {
		float: right;
		font-size: 12px;
		border-radius: 0;
		margin-right: 34px;
		margin-left: 10px;
		margin-top: 12px;
	}

	#sportAnalysis .btnGroup {
		float: right;
		margin-top: 12px;
		margin-right: 10px;
	}

	#sportAnalysis .btnSpan {
		float: right;
		display: block;
		height: 36px;
		line-height: 36px;
		width: 80px;
		background-color: #ffffff;
		font-family: "微软雅黑";
		font-weight: 400;
		color: #999999;
		font-size: 14px;
		margin-top: 12px;
		box-sizing: border-box;
		border: solid 1px #999999;
		text-align: center;
		cursor: pointer;
	}

	#sportAnalysis .span_active {
		background-color: #999999;
		color: #ffffff;
	}
</style>